<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap.css">
    <script src="../lib/vue-resource-1.3.4.js"></script>
</head>
<body>
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h4 class="panel-title">添加品牌</h4>
        </div>
        <div class="panel-body form-inline">
            <label>
                name:<input v-model="name" class="form-control" @keyup.enter="add" />
            </label>
            搜索产品关键字:<input type="text" class="form-control"/>
        </div>
    </div>
    <table class="table table-bordered table-hover table-strip">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="item in list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.ctime | dateFormat() }}</td>
                <td>
                    <a @click.prevent="del(item.id)">delete</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

    <script>

        Vue.filter('dateFormat',function(dateStr,pattern){
            var date = new Date(dateStr);
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day  = date.getDate();
            var hours = date.getHours();
            var minute = date.getMinutes().toString().padStart(2,'0');
            var seconds = date.getSeconds().toString().padStart(2,'0');

            if(pattern && pattern.toLowerCase() == 'yyyy-mm-dd'){
                return `${year}-${month}-${day}`;
            }else{
                return `${year}-${month}-${day} ${hours}:${minute}:${seconds}`;
            }
        })

        //全局vue-resource配置
        Vue.http.options.root = 'http://www.liulongbin.top:3005/';
        //配置post请求中需要带的config
        Vue.http.options.emulateJSON = true;

        var vue = new Vue({
            el : "#app",
            data:{
                list:[
                    {id:1,name:'阿斯顿马丁',ctime:new Date()},
                    {id:2,name:'保时捷',ctime:new Date()}
                ],
                name:'',
                keyWords:''
            },
            methods:{
                getAllInfo(){
                    this.$http.get('api/getprodlist').then(result => {
                        var result = result.body;
                        if(result.status == 0){//访问成功
                            this.list = result.message;
                        }else{//访问失败
                            alert('获取数据失败，请联系工作人员');
                        }
                    });
                },
                add(){
                    this.$http.post('api/addproduct',{
                        name:this.name
                    }).then(result => {
                        this.getAllInfo();
                    })
                },
                del(id){
                    this.$http.get("api/delproduct/"+id).then(result => {
                        this.getAllInfo();
                    })
                }
            },
            created(){ //在此时，data和methods都被初始化好了,所以可以调用方法
                this.getAllInfo();
            }
        });
    </script>
</body>
</html>